<template>
  <el-dialog
    v-model="dialogVisible"
    :title="title"
    width="80%"
    :before-close="handleClose"
    style="background: #1465d6; height: 50vh"
    class="basicDialog"
    @closed="handleClose"
  >
    <!--  <span>请填写基本信息</span> -->
    <el-form
      ref="formRef"
      :model="Basicform"
      label-width="180px"
      :rules="rules"
      :inline="false"
      class="custom-form"
    >
      <el-form-item label="性别:" prop="gender">
        <el-radio-group v-model="Basicform.gender">
          <el-radio
            :label="item.value"
            size="large"
            v-for="item in genderOptions"
            :key="item.value"
            >{{ item.value }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <el-form-item label="年龄:" prop="age">
        <el-radio-group v-model="Basicform.age">
          <el-radio
            :label="item.value"
            size="large"
            v-for="item in ageOptions"
            :key="item.value"
            >{{ item.label }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancle">取消</el-button>
        <el-button type="primary" @click="save"> 保存 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, watch } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import type { FormInstance, FormRules } from "element-plus";
import { localStorageUtil } from "@/utils/localStorageUtil";
import { useRouter } from "vue-router";
const router = useRouter();
type FormData = {
  gender: string;
  age: number;
};
const Basicform = reactive<FormData>({
  gender: "",
  age: 0,
});
const formRef = ref<FormInstance>();
const emit = defineEmits(["update:modelValue", "clear"]);

const props = defineProps({
  title: {
    type: String,
    default: "请输入基本信息",
  },
  modelValue: {
    type: Boolean,
    default: false,
  },
});
const cancle = () => {
  router.push("/home");
};
const dialogVisible = ref(props.modelValue);
const genderOptions = [
  { label: "1", value: "男" },
  { label: "2", value: "女" },
];
const ageOptions = [
  { value: 1, label: "<18岁" },
  { value: 2, label: "18岁≤年龄<60岁" },
  { value: 3, label: "≥60岁" },
];
const validateAge = (rule: any, value: number, callback: any) => {
  const ageArr = [1, 2, 3];

  if (!ageArr.includes(value)) {
    callback(new Error("请选择年龄段"));
  } else {
    callback();
  }
};
const rules = reactive({
  gender: [{ required: true, message: "请选择性别", trigger: "blur" }],
  age: [
    { required: true, message: "请选择年龄段", trigger: "blur" },
    { validator: validateAge, trigger: "blur" },
  ],
});

watch(
  () => props.modelValue,
  (newValue) => {
    dialogVisible.value = newValue;
  }
);
watch(
  () => dialogVisible.value,
  (newValue) => {
    emit("update:modelValue", newValue);
  }
);
const save = async () => {
  console.log(Basicform);
  if (formRef.value) {
    const valid = await formRef.value.validate();
    console.log(valid);
    if (!valid) return;

    localStorageUtil.set("userInfo", Basicform);
    ElMessage.success("保存成功");
    dialogVisible.value = false;
    emit("clear");
  }
};
const handleClose = () => {
  dialogVisible.value = false;
  Object.assign(Basicform, { age: "", gender: "" });
};
</script>
<style lang="scss">
.dialog-footer button:first-child {
  margin-right: 10px;
}

.basicDialog.el-dialog {
  border-radius: 16px;
  overflow: hidden;
  .el-dialog__header {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 5vh;
    border-bottom: 1px solid #ccc;
    .el-dialog__title {
      color: #ffffff !important;
      font-size: 48px !important;
    }
    .el-dialog__headerbtn {
      display: none;
    }
  }
}

.el-form {
  width: 90%;
  margin-top: 2vh;
  .el-form-item {
    font-size: 38px;
  }
}
.el-dialog__footer {
  display: flex;
  align-items: center;
  justify-content: space-around;
  // padding-left: 0 20px;
  margin-top: 10vh;

  height: 5vh;
  .el-button {
    width: 380px;
    height: 120px;
    border-radius: 70px;
    overflow: hidden;
    font-size: 48px;
  }
}
</style>
<style lang="scss" scoped>
.custom-form {
  width: 90%;
  margin-top: 30px;
  padding-left: 30px;
  .el-form-item {
    margin-top: 5vh;

    :deep(.el-form-item__label) {
      color: #ffffff !important;
      font-size: 40px;
      margin-right: 20px;
    }
    &:last-child {
      margin-top: 8vh;
    }
  }
  :deep(.el-form-item__error) {
    font-size: 28px;
  }
}
:deep(.el-radio.el-radio--large .el-radio__label) {
  color: #ffffff;
  font-size: 36px;
}
/* 未选中的单选框样式 */
.el-radio__input.is-unchecked + .el-radio__label {
  color: #ffffff !important;
}

/* 选中的单选框样式 */
:deep(.el-radio__input.is-checked + .el-radio__label) {
  color: #90df46 !important; /* 选中时的颜色 */
}
:deep(.el-radio__input.is-checked .el-radio__inner) {
  background: #90df46 !important; /* 选中时的颜色 */
  border-color: #90df46;
}
:deep(.el-radio.el-radio--large .el-radio__inner) {
  width: 30px;
  height: 30px;
}
</style>
